<template>
  <div class="main-body">
    <div class="main">
      <!-- 主体内容标题 -->
      <div class="head">
        <span class="title orange">企业工作台</span>
        <span class="symbol">></span>
        <span class="title orange">采购报价看板管理</span>
        <span class="symbol">></span>
        <span class="title gray">物料管理</span>
      </div>
      <!-- 主体内容 列表 -->
      <div class="list">
        <!-- 第一栏 搜索和匹配 -->
        <div class="search">
          <!-- 三级联动 -->
          <div class="search-item">
            <el-select v-model="sheng" @change="choseProvince" placeholder="请选择大类" class="item-space" size="mini">
              <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="shi" @change="choseCity" placeholder="请选择子类" class="item-space" size="mini">
              <el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="qu" @change="choseBlock" placeholder="请选择小类" class="item-space" size="mini">
              <el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="search-item">
            <el-select v-model="state" placeholder="请选择状态" size="mini">
              <el-option label="已下架" value="up"></el-option>
              <el-option label="已上架" value="down"></el-option>
            </el-select>
          </div>
          <!-- 日期间隔 -->
          <div class="search-item">
            <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" class="date-width">
            </el-date-picker>
          </div>
          <div class="search-input">
            <el-input v-model="inputSearch" size="mini" placeholder="请输入应用类/品牌/牌号/产地"></el-input>
          </div>
          <el-button class="search-btn" size="mini">搜索</el-button>
        </div>
        <div class="result">
          筛选结果：共
          <span class="count">129</span>
          条相关数据
        </div>
        <!-- 表格内容 -->
        <div class="table">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%"
            :header-cell-style="{background:'#f3f3f3'}">
            <el-table-column
              prop="use"
              label="应用类"
              width="120">
            </el-table-column>
            <el-table-column
              prop="matter"
              label="物料类"
              width="120">
            </el-table-column>
            <el-table-column
              prop="name"
              label="物料名称"
              width="200"
              class-name="column-color">
            </el-table-column>
            <el-table-column
              label="品牌"
              width="120">
              -
            </el-table-column>
            <el-table-column
              label="牌号"
              width="120">
              123
            </el-table-column>
            <el-table-column
              label="规格"
              width="120">
              122*312*123mm
            </el-table-column>
            <el-table-column
              label="产地"
              width="120">
              青岛
            </el-table-column>
            <el-table-column
              label="状态"
              width="120">
              <div class="shelf">已下架</div>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button class="handle" @click="open" type="text" size="small">上架</el-button>
                <el-button class="handle" @click="handleClick(scope.row)" type="text" size="small">复制物料</el-button>
                <el-button class="handle" type="text" size="small">编辑</el-button>
                <el-button class="handle" @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-num">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'List',
  data () {
    return {
      // 三级联动
      province: '',
      sheng: '',
      sheng1: '',
      shi: '',
      shi1: [],
      shi2: '',
      qu: '',
      qu1: [],
      city: '',
      block: '',
      msg: '',
      // 日期
      value: '',
      // 选择状态
      state: '',
      // 输入搜索内容
      inputSearch: '',
      // 分页内容
      tableData: [],
      total: 0,
      pagesize: 10,
      currentPage: 1
    }
  },
  methods: {
    // 三级联动
    getCityData: function () {
      var that = this
      // 获取数据
      axios.get('/static/json/material.json').then(function (response) {
        if (response.status === 200) {
          var data = response.data
          that.province = []
          that.city = []
          that.block = []
          // 分类数据
          for (var item in data) {
            if (item.match(/0000$/)) {
              that.province.push({id: item, value: data[item], children: []})
            } else if (item.match(/00$/)) {
              that.city.push({id: item, value: data[item], children: []})
            } else {
              that.block.push({id: item, value: data[item]})
            }
          }
          // 第二级子类 分类
          for (var index in that.province) {
            for (var index1 in that.city) {
              if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                that.province[index].children.push(that.city[index1])
              }
            }
          }
          // 第三级小类 分类
          for (var item1 in that.city) {
            for (var item2 in that.block) {
              if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                that.city[item1].children.push(that.block[item2])
              }
            }
          }
        } else {
          console.log(response.status)
        }
      }).catch(function (error) { console.log(typeof +error) })
    },
    // 第一级大类 change
    choseProvince: function (e) {
      for (var index2 in this.province) {
        if (e === this.province[index2].id) {
          this.shi1 = this.province[index2].children
          this.shi = this.province[index2].children[0].value
          this.qu1 = this.province[index2].children[0].children
          this.qu = this.province[index2].children[0].children[0].value
          this.E = this.qu1[0].id
          this.sheng1 = this.province[index2].value
          this.msg = this.sheng1 + '/' + this.shi + '/' + this.qu
        }
      }
      // 控制第二区块的出现
      if (this.sheng1 === '钢材' || this.sheng1 === '化工') {
        this.need = true
      } else {
        this.need = false
      }
    },
    // 第二级子类 change
    choseCity: function (e) {
      console.log(e, 'City')
      for (var index3 in this.city) {
        if (e === this.city[index3].id) {
          console.log(this.city[index3].value)
          this.qu1 = this.city[index3].children
          this.qu = this.city[index3].children[0].value
          this.E = this.qu1[0].id
          this.shi2 = this.city[index3].value
          this.msg = this.sheng1 + '/' + this.shi2 + '/' + this.qu
        }
      }
    },
    // 第三极小类 change
    choseBlock: function (e) {
      this.E = e
      for (var index4 in this.block) {
        if (e === this.block[index4].id) {
          console.log(this.block[index4].value)
          this.E = this.block[0].id
          this.msg = this.sheng1 + '/' + this.shi2 + '/' + this.block[index4].value
        }
      }
    },
    // axios 加入数据 分页方法
    addUser () {
      var that = this
      axios.get('/static/json/list.json').then(function (response) {
        if (response.status === 200) {
          var data = response.data.data
          var count = 0
          for (var item in data) {
            count++
            that.tableData.push(data[item])
          }
          that.total = count
        } else {
          console.log(response.status)
        }
      }).catch(function (error) { console.log(typeof +error) })
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage
    },
    // 上架弹出框
    open () {
      this.$confirm('确定上架该物料？', '友情提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '上架成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消上架'
        })
      })
    },
    // 复制物料，获取数据
    handleClick (row) {
      // vuex 传值 更新数据
      this.$store.dispatch('getData', row)
      // 路由跳转
      this.$router.push('/')
    },
    // Vuex 发布物料 插入数值
    setData () {
      var newData = this.$store.state.newData
      if (newData.use && newData.matter && newData.name) {
        this.tableData.unshift(newData)
      } else {
        return false
      }
    },
    // 删除数据 index:目标项下标  rows:包含全部数据的数组
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  },
  // 挂载函数
  mounted () {
    this.getCityData()
    this.addUser()
    this.setData()
  }
}
</script>

<style lang="less" scoped>
  @import "~styles/total.less";
  // 改变默认样式
  .table-height {
    height: 100px;
  }
  .date-width {
    width: 200px;
  }
  .orange {
    color: @orange;
    font-weight: bold;
  }
  .gray {
    color: gray;
  }
  .column-color {
    .cell {
      color: @orange;
    }
  }
  // 主体内容
  .main-body {
    width: 100%;
    overflow: auto;
    .main {
      width: 1350px;
      margin: 0 auto;
      // 主体内容 标题
      .head {
        width: 100%;
        height: 75px;
        line-height: 75px;
        border-bottom: 2px solid #e9e7e7;
        .title {
          font-size: 20px;
        }
        .symbol {
          font-size: 18px;
          margin: 0 15px;
        }
      }
      .list {
        .search {
          display: flex;
          align-items: center;
          padding: 20px 20px 10px 20px;
          .search-item {
            display: inline-block;
          }
          .search-input {
            width: 200px;
            display: inline-block;
            margin-left: 40px;
          }
          .search-btn {
            width: 100px;
            color: #fff;
            margin-left: 10px;
            background-color: @orange;
            display: inline-block;
          }
        }
        .result {
          font-size: 14px;
          padding: 10px 20px 10px 20px;
          .count {
            color: @orange;
          }
        }
        .table {
          padding: 0 20px;
          .shelf {
            width: 50px;
            margin: 0 auto;
            background-color: #e6e6e6;
          }
          .handle{
            margin-right: 10px;
            color: @orange;
            cursor: pointer;
          }
        }
        .page-num {
          display: flex;
          justify-content: center;
        }
      }
    }
  }
</style>
